<template>

    <!-- <p>{{ cmRef }}</p> -->
    <!-- <p>{{ tarTree }}</p>
    <p>{{ bindValue }}</p>
    <p>{{ cmOptions.mode }}</p> -->
    <el-row style="height: 50px;"></el-row>

    <el-row>

        <el-col :span="6" :offset="1">
            <el-form-item label="选择配置文件">
                <!-- <el-config-provider :value-on-clear="null" :empty-values="[undefined, null]"> -->
                <el-cascader v-model="bindValue.path" placeholder="选择配置文件" :options="tarTree" :filterable="true"
                    :change="selected(bindValue)" :clearable="false" />
            </el-form-item>
        </el-col>

        <!-- <el-button @click="fetch(bindValue)">获取文件内容</el-button> -->

        <el-col :span="5">
            <el-form-item label="Lang">
            <el-select v-model="cmOptions.mode" placeholder="Select" style="width: 80px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
        </el-form-item>
        </el-col>
        <!-- <el-checkbox :selected="true" value="Online activities" name="type">
            只读
        </el-checkbox> -->
        <el-col :span="1">
            <!-- <el-button type="primary" @click="commit(code, bindValue.path)">保存修改</el-button> -->
            <el-button type="primary" @click="commitconfirm(code, bindValue.path)">保存修改</el-button>
        </el-col>
    </el-row>


    <el-row>
        <el-col :span="21" :offset="1">
            <Codemirror v-model:value="code" :options="cmOptions" :border="true" ref="cmRef" @change="onChange"
                height="600px" @input="onInput" @ready="onReady">
            </Codemirror>
        </el-col>
    </el-row>

</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue"
import { ElMessage, ElMessageBox  } from "element-plus"
import "codemirror/mode/javascript/javascript.js"
import Codemirror from "codemirror-editor-vue3"

// mode
import "codemirror/mode/yaml/yaml.js"
import "codemirror/mode/javascript/javascript.js"
// theme 
import "codemirror/theme/3024-day.css"

import api from "../../api"
// 获取目录树的根目录
const tarGet = import.meta.env.VITE_TARGET

// 接收目录树
const tarTree = ref(null)

// 旧版本配置文件与最新版本配置文件对比表单
const bindValue = ref({
    "path": null,
})

// 接收接口返回的数据
const code = ref(
    ``
)

// 文件格式选择框
const options = [
    {
        value: 'text/x-yaml',
        label: 'yaml',
    },
    {
        value: 'application/json',
        label: 'json',
        disabled: false,
    },
]

const cmRef = ref()
const cmOptions = ref({
    mode: "text/x-yaml",
    // theme: "3024-day",
    readOnly: false,
})
const onChange = (val, cm) => {
    // console.log(val)
    // console.log(cm.getValue())
    console.log("onChange");
}

const onInput = (val) => {
    // console.log(val)
    console.log("onInput");
}

const onReady = (cm) => {
    // console.log(cm.focus())
    console.log("onReady");
}

// 获取目录树
function getDirTree(base_dir, dest_data) {
    api.dirTree(base_dir).then(res => {
        // console.log(res.data);
        dest_data.value = res.data
    }

    )
}

// 获取配置文件内容
function fetch(data) {
    api.getconfigfile(data).then(res => {
        code.value = res.data
    })
}

// 保存修改的配置文件
function commit(code, pathArr) {
    api.commitconfigfile(code, pathArr).then(res => {
        // console.log(res.data);
        ElMessage(res.data)
    })
}


// 是否确认保存修改
function commitconfirm(code, pathArr) {
    ElMessageBox.confirm(
    '确认保存修改?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {commit(code, pathArr)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '修改未提交',
      })
    })
}


// 选中文件的时候获取配置文件内容
function selected(bindValue) {
    if (bindValue.path != null) {
        fetch(bindValue)
    }

}

onMounted(() => {
    setTimeout(() => {
        cmRef.value?.refresh()
    }, 1000)

    // setTimeout(() => {
    //     cmRef.value?.resize(300, 200)
    // }, 2000)

    setTimeout(() => {
        cmRef.value?.cminstance.isClean()
    }, 3000)

    setTimeout(() => {
        getDirTree(tarGet, tarTree)
    }, 10)
})

onUnmounted(() => {
    cmRef.value?.destroy()
})


</script>